<template>
    <a-card :bordered="false">
        <!-- 操作按钮 -->
        <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            <!-- 表格选中后控制显示隐藏按钮 -->
            <a-button @click="batchDel" ghost type="primary" icon="delete" v-if="selectedRowKeys.length > 0">批量删除</a-button>
        </div>

        <!-- table区域--begin -->
        <div>
            <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                 <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
                    selectedRowKeys.length }}</a>项&nbsp;&nbsp;
                 <a style="margin-left: 24px" @click="onClearSelected">清空</a>
            </div>
            <a-table :columns="columns" size="middle" :pagination="false" :dataSource="dataSource" :loading="loading" @expand="expandSubmenu"
                     :expandedRowkeys="expandedRowKeys"
                     :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                      @expandedRowsChange="handleExpandedRowsChange"
            >
             <span slot="action" slot-scope="text,record">
                 <a @click="handleEdit(record)">编辑</a>
                 <a-divider type="vertical" />
                 <a-dropdown>
                     <a class="ant-dropdown-link">
                        更多 <a-icon type="down"/>
                     </a>
                     <a-menu slot="overlay">
                         <a-menu-item>
                             <a href="javascript:;" @click="handleDetail(record)">详情</a>
                         </a-menu-item>
                          <a-menu-item>
                             <a href="javascript:;" @click="handleAddSub(record)">添加下级</a>
                         </a-menu-item>
                          <a-menu-item>
                             <a href="javascript:;" @click="handleDetail(record)">数据规则</a>
                         </a-menu-item>
                         <a-menu-item>
                             <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
                                <a>删除</a>
                              </a-popconfirm>
                         </a-menu-item>
                     </a-menu>
                 </a-dropdown>
             </span>
             <!-- 字符串超长 省略号显示 -->
             <span slot="url" slot-scope="text">
                 <j-ellipsis :value="text" :length="25"></j-ellipsis>
             </span>
              <span slot="component" slot-scope="text">
                 <j-ellipsis :value="text"></j-ellipsis>
             </span>
            </a-table>
        </div>
        <!-- table区域--end -->

        <permission-form ref="modalForm" @ok="modalFormOk"></permission-form>
    </a-card>
</template>
<script>
import { getSystemMenuList,getSystemSubmenu } from '@/mock'
import {JeecgListMixin} from '@/mixins/JeecgListMixin';
import JEllipsis from '@/components/jeecg/JEllipsis'
import PermissionForm from './form/PermissionForm.vue'

const columns = [
    {
        title:'菜单名称',
        dataIndex: 'name',
        key: 'name'
    },
    {
        title: '菜单管理',
        dataIndex: 'menuType',
        key: 'menuType',
        customRender: function(text) {
            if(text == 0) {
                return '菜单'
            }else if(text == 1) {
                return '菜单'
            }else if(text == 2) {
                return '按钮/权限'
            }else {
                return text;
            }
        },
    },
    {
        title: 'icon',
        dataIndex: 'icon',
        key: 'icon'
    },
    {
        title: '组件',
        dataIndex: 'component',
        key: 'component',
        scopedSlots: { customRender: 'component' }
    },
    {
        title: '路径',
        dataIndex: 'url',
        key: 'url',
        scopedSlots: { customRender: 'url' }
    },
    {
          title: '排序',
          dataIndex: 'sortNo',
          key: 'sortNo'
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 150
    }
];
export default {
    name: 'PermissionListAsync',
    mixins: [JeecgListMixin],
    components: {
        JEllipsis,
        PermissionForm,
    },
    data() {
        return {
            loading: false,
            columns: columns,
            // 展开的行 
            expandedRowKeys: [],
        }
    },
    methods: {
        loadData() {
            this.loading = true;
            getSystemMenuList().then(res=> {
                if(res.success) {
                  this.dataSource = res.result;
                }
            }).finally(()=>{
                this.loading = false;
            })
        },
        expandSubmenu(expanded,record) {
            if(expanded && (!record.children || record.children.length === 0)) {
                // 获取子菜单
                getSystemSubmenu().then(res=>{
                    if(res.success) {
                        record.children = res.result
                    }
                })
            }
        },
        handleExpandedRowsChange(expandedRows) {
            this.expandedRowKeys = expandedRows;
        },
        // 添加下级
        handleAddSub(record) {
            console.log(record);
            this.$refs.modalForm.title = "添加子菜单";
            this.$refs.modalForm.disableSubmit = false;
            this.$refs.modalForm.edit({status:'1',permsType:'1',route:true,'parentId':record.id,menuType:1});
        }
    }
}
</script>
<style scoped>
  @import '../../../assets/less/common.less'
</style>